<template>
    <el-dialog :title="title" :visible.sync="visible" @close="$emit('close-dialog')">
      <el-form
        :model="dialogForm"
        :rules="rules"
        :inline="false"
        label-position="right"
        label-width="120px"
        ref="dialogForm">
        <el-form-item label="菜单编号" v-show="false" prop="id">
          <el-input v-model="dialogForm.id"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="dialogForm.name"></el-input>
        </el-form-item>
        <el-form-item label="菜单访问路径" prop="path">
          <el-input v-model="dialogForm.path"></el-input>
        </el-form-item>
        <el-form-item label="菜单请求组件" prop="component">
          <el-input v-model="dialogForm.component"></el-input>
        </el-form-item>
        <el-form-item label="父级菜单" prop="parentId">
          <el-input v-model="dialogForm.parentId"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="iconCls">
          <el-input v-model="dialogForm.iconCls"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('close-dialog')">取 消</el-button>
        <el-button type="primary"  @click="operator">确 定</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </div>
    </el-dialog>
</template>

<script>
  import {postRequest} from "../../../util/api";

  export default {
    props: {
      dialogVisible: {
        type: [Boolean, Number],
        default : () => false
      },
      type: {
        type: String,
        default : () => "addMenu"
      },
      form: {
        type: Object,
        default() {
          return {
            id: 0,
            url: "",
            path: "",
            component: "",
            name: "",
            iconCls: "",
            parentId: ""
          }
        }
      }
    },
    name: "OperationMenuDialog",
    data() {
      return {
        dialogForm: {
          id: 0,
          url: "",
          path: "",
          component: "",
          name: "",
          iconCls: "",
          parentId: ""
        },
        visible: false,
        rules: {
          name: [{required: true, message: '请输入菜单名称', trigger: 'blur'}],
          path: [{required: true, message: '请输入菜单请求路径', trigger: 'blur'}],
          component: [{required: true, message: '请输入菜单请求组件', trigger: 'blur'}],
          parentId : [{required: true, message: '请选择菜单父节点', trigger: 'blur'}]
        }
      }
    },
    computed: {
      title() {
        return this.type === 'addMenu' ? '添加菜单' : '修改菜单';
      }
    },
    methods: {
      operator() {
        if (this.type === "addMenu") {
          this.addMenu();
        } else if (this.type === "modifyMenu") {
          this.modifyMenu();
        }
      },
      addMenu() {
        this.$refs.dialogForm.validate((valid) => {
          if (valid) {
            postRequest("/system/menu/addMenu", this.dialogForm).then(resp=> {
              if (resp.status === 200) {
                this.$emit('close-dialog');
                this.$emit('query');
              }
            })
          } else {
            return false;
          }
        })
      },
      modifyMenu() {
        this.$refs.dialogForm.validate((valid) => {
          if (valid) {
            postRequest("/system/menu/modifyMenu", this.dialogForm).then(resp=>{
              if (resp.status === 200) {
                this.$emit('close-dialog');
                this.$emit('query');
              }
            })
          } else {
              return false;
          }
        })
      },
      resetForm() {
        if (this.type === 'addMenu') {
          this.dialogForm = {
            id: 0,
            url: "",
            path: "",
            component: "",
            name: "",
            iconCls: "",
            parentId: ""
          }
        } else {
          this.dialogForm = JSON.parse(JSON.stringify(this.form));
        }
      },
      reset() {
        if (this.$refs.dialogForm !== undefined) {
          this.$refs.dialogForm.resetFields();
        }
        this.resetForm();
      }
    },
    watch: {
      dialogVisible(newValue, oldValue) {
        this.reset();
        this.visible = newValue;
      },
      type(newValue, oldValue) {
        if (newValue === 'modifyMenu') {
          this.dialogForm = JSON.parse(JSON.stringify(this.form));
        }
      },
      form(newValue, oldValue) {
        if (this.type === 'addMenu' || newValue === null) {
          return;
        }
        this.dialogForm = JSON.parse(JSON.stringify(newValue));
      }
    }
  }
</script>

<style scoped>

</style>
